<template>
	<view class="all">
		<view class="aooo">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item>
					<view class="swiper-item uni-bg-red">
						<image class="botton" src="../../static/imges/details1.png" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">
						<image class="botton" src="../../static/imges/details1.png" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue">
						<image class="botton" src="../../static/imges/details1.png" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="boold" @click="login">
				<image class="bant" src="../../static/imges/zuo3.png" mode=""></image>
			</view>
			<image class="bold" v-show="!falg" @click="attre" src="../../static/imges/ax.png" mode=""></image>
			<image class="bold" v-show="falg" @click="arrt" src="../../static/imges/ax2.png" mode=""></image>
			<image class="best" src="../../static/imges/fx.png" mode=""></image>
		</view>

		<view class="buan">
			<view class="lian"> 480万 大汉汉园（别墅） 380平 5室两厅，南北通透</view>
			<view style="margin-left: 30rpx;margin-top: 50rpx;font-size: 20rpx;">
				<text class="bohh">平价户型</text><text class="aqwer" style="color: #ED5A84;">平价户型</text><text class="aqwer" style="color: #D650D8;">平价户型</text>
			</view>
			<view class="attbox">
				<view>
					<view class="appp">
						500m²
					</view>
					<text class="attr-name">约50个工位</text>
				</view>
				<view>
					<view class="appp">
						￥5.3<text class="attr-name">万元/月</text>
					</view>
					<text class="attr-name">总价￥1.78万元/月</text>
				</view>
				<view>
					<view class="appp">
						楼层
					</view>
					<text class="attr-name">12楼</text>
				</view>
			</view>
		</view>
		<view class="botteer">
			<view>
				<view class="banter" style="margin-left: 20rpx;">
					<image class="box8" src="../../static/imges/dtu.png" mode=""></image>
					<text>芙蓉区·五一广场 长沙市芙蓉区解放西路188号</text>
				</view>
				<view class="banter" style="margin-left: 30rpx;margin-top: 10rpx;">
					<image style="width: 28rpx;height: 28rpx;" src="../../static/imges/gjc.png" mode=""></image>
					<text style="margin-left: 7rpx;">距离 [1号线·五一广场] 约323米</text>
				</view>
			</view>
			<view class="box3">
				<image class="attr-value" src="../../static/imges/jp.png" mode=""></image>
			</view>
		</view>
		<view style="width: 100%;height: 20rpx;background-color: #F4F4F4;"></view>


		<glance v-on:clickKeyword='clickKeyword' :data='keyList' class="peater"></glance>
		<view class="demoList" v-for="(item,index) in array" :key='index'>
			<navigator url="ShopsDetails">
				<view class="mgt__item" >
					<view>
						<image class="font-class" src="../../static/imges/details1.png" mode=""></image>
						<text style="font-weight: 600;position: relative;top: -40rpx;left: 20rpx;">100m²</text>
					</view>
					<view style="margin-top: 25rpx;">
						<text style="color: #A73837;font-weight: 600;">￥4.8</text>
						<text style="font-size: 20rpx;color: #A1A1A1;">万元/月</text>
					</view>
					<view style="margin-top: 25rpx;font-weight: 600;color: #A1A1A1;">精装</view>
				</view>
			</navigator>
			
			<view class="mgt__item" >
				<view>
					<image class="font-class" src="../../static/imges/details1.png" mode=""></image>
					<text style="font-weight: 600;position: relative;top: -40rpx;left: 20rpx;">100m²</text>
				</view>
				<view style="margin-top: 25rpx;">
					<text style="color: #A73837;font-weight: 600;">￥4.8</text>
					<text style="font-size: 20rpx;color: #A1A1A1;">万元/月</text>
				</view>
				<view style="margin-top: 25rpx;font-weight: 600;color: #A1A1A1;">简装</view>
			</view>
			<view class="mgt__item">
				<view>
					<image class="font-class" src="../../static/imges/details1.png" mode=""></image>
					<text style="font-weight: 600;position: relative;top: -40rpx;left: 20rpx;">100m²</text>
				</view>
				<view style="margin-top: 25rpx;">
					<text style="color: #A73837;font-weight: 600;">￥4.8</text>
					<text style="font-size: 20rpx;color: #A1A1A1;">万元/月</text>
				</view>
				<view style="margin-top: 25rpx;font-weight: 600;color: #A1A1A1;">简装</view>
			</view>
			<view class="box5">
				查看更多
			</view>
		</view>

		<glance v-on:clickKeyword='clickKeyword' :data='List' class="peater"></glance>
		<view class="demoList" v-for="(item,index) in array" :key='index'>
			<view class="mgt__item">
				<view>
					<image class="font-class" src="../../static/imges/details1.png" mode=""></image>
					<text style="font-weight: 600;position: relative;top: -40rpx;left: 20rpx;">100m²</text>
				</view>
				<view style="margin-top: 25rpx;">
					<text style="color: #A73837;font-weight: 600;">￥4.8</text>
					<text style="font-size: 20rpx;color: #A1A1A1;">万元/月</text>
				</view>
				<view style="margin-top: 25rpx;font-weight: 600;color: #A1A1A1;">简装</view>
			</view>
			<view class="mgt__item">
				<view>
					<image class="font-class" src="../../static/imges/details1.png" mode=""></image>
					<text style="font-weight: 600;position: relative;top: -40rpx;left: 20rpx;">100m²</text>
				</view>
				<view style="margin-top: 25rpx;">
					<text style="color: #A73837;font-weight: 600;">￥4.8</text>
					<text style="font-size: 20rpx;color: #A1A1A1;">万元/月</text>
				</view>
				<view style="margin-top: 25rpx;font-weight: 600;color: #A1A1A1;">简装</view>
			</view>
			<view class="mgt__item">
				<view>
					<image class="font-class" src="../../static/imges/details1.png" mode=""></image>
					<text style="font-weight: 600;position: relative;top: -40rpx;left: 20rpx;">100m²</text>
				</view>
				<view style="margin-top: 25rpx;">
					<text style="color: #A73837;font-weight: 600;">￥4.8</text>
					<text style="font-size: 20rpx;color: #A1A1A1;">万元/月</text>
				</view>
				<view style="margin-top: 25rpx;font-weight: 600;color: #A1A1A1;">简装</view>
			</view>
			<view class="box5">
				查看更多
			</view>
		</view>
		<view style="width: 100%;height: 20rpx;background-color: #F4F4F4;"></view>

		<view class="char">
			<view style="font-weight: 600;margin: 30rpx 0 0 20rpx;">
				项目对接人
			</view>
			<!-- <text style="font-size: 20rpx;color: #A1A1A1;margin-left: 20rpx;">近30天带看2次，总带看9次</text> -->
			<view class="class-name">
				<view class="code-name">
					<image style="width: 100%;height: 100%;" src="../../static/imges/yh.png" mode=""></image>
				</view>
				<view class="comment">
					<view style="font-weight: 600;margin-top: 30rpx;font-size: 15px;color: #333333;">高级服务顾问·周彪</view>
					<view style="font-size: 13px;color: #A1A1A1;margin-top: 10rpx;">带看343次，维护着134套房源</view>
					<!-- <image class="box8" style="position: relative;top: 10rpx;" src="../../static/imges/dtu.png" mode=""></image>
					<text style="color: #A1A1A1;">带看过该大厦3次，15天前带看过</text> -->
				</view>
				<view class="contont">
					<image class="box8" style="margin-top: 20rpx;margin-left: 20rpx;" src="../../static/imges/xx.png" mode=""></image>
				</view>
			</view>
			<view class="class-name" style="margin-top: 50rpx;">
				<view class="code-name">
					<image style="width: 100%;height: 100%;" src="../../static/imges/yh.png" mode=""></image>
				</view>
				<view class="comment">
					<view style="font-weight: 600;margin-top: 30rpx;font-size: 15px;color: #333333">高级服务顾问·周彪</view>
					<view style="font-size: 13px;color: #A1A1A1;margin-top: 10rpx;">带看343次，维护着134套房源</view>
					<!-- <image class="box8" style="position: relative;top: 10rpx;" src="../../static/imges/dtu.png" mode=""></image>
					<text style="color: #A1A1A1;">带看过该大厦3次，15天前带看过</text> -->
				</view>
				<view class="contont">
					<image class="box8" style="margin-top: 20rpx;margin-left: 20rpx;" src="../../static/imges/xx.png" mode=""></image>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 20rpx;background-color: #F4F4F4;"></view>
		<view class="dib-box">
			<view style="font-weight: 600;margin: 30rpx 0 0 20rpx;">
				大厦简介
			</view>
			<view style="display: flex;font-size: 26rpx;margin-top: 20rpx;">
				<view  style="width: 300rpx;margin-left: 20rpx;">
					<view class="kkk">竣工时间</view><text>2013年</text>
				</view>
				<view style="margin-left: 50rpx;width: 330rpx;">
					<view class="kkk">地理位置</view><text>中山路491号</text>
				</view>
			</view>
			<view style="display: flex;font-size: 26rpx;margin-top: 20rpx;">
				<view  style="width: 300rpx;margin-left: 20rpx;">
					<view class="kkk">层高</view><text>3.6米，净高&it:=3米</text>
				</view>
				<view style="margin-left: 50rpx;width: 330rpx;">
					<view class="kkk">层数</view><text>48层</text>
				</view>
			</view>
			<view style="display: flex;font-size: 26rpx;margin-top: 20rpx;">
				<view  style="width: 300rpx;margin-left: 20rpx;">
					<view class="kkk">物业</view><text>深圳嘉年华物业</text>
				</view>
				<view style="margin-left: 50rpx;width: 330rpx;">
					<view class="kkk">物业费</view><text>8.5元/m²/月</text>
				</view>
			</view>
			<view style="display: flex;font-size: 26rpx;margin-top: 20rpx;">
				<view  style="width: 300rpx;margin-left: 20rpx;">
					<view class="kkk">车位</view><text>2013个</text>
				</view>
				<view style="margin-left: 50rpx;width: 330rpx;">
					<view class="kkk">车位月租金</view><text>600元/月，1350元/季度，2400元/半年，3600元/年。30分钟内免费，后面每小时5元，8小时50元，50封顶</text>
				</view>
			</view>
			<view style="display: flex;font-size: 26rpx;margin-top: 20rpx;">
				<view  style="width: 300rpx;margin-left: 20rpx;">
					<view class="kkk">空调</view><text>风机盘管</text>
				</view>
				<view style="margin-left: 50rpx;width: 330rpx;">
					<view class="kkk">空调费</view><text>6.65/时/面板</text>
				</view>
			</view>
			<view style="display: flex;font-size: 26rpx;margin-top: 20rpx;">
				<view  style="width: 300rpx;margin-left: 20rpx;">
					<view class="kkk">空调开放时长</view><text>记流量</text>
				</view>
				<view style="margin-left: 50rpx;width: 330rpx;">
					<view class="kkk">电梯</view><text>每栋14部电梯（12部客梯,2部货梯）</text>
				</view>
			</view>
			<view style="display: flex;font-size: 26rpx;margin-top: 20rpx;">
				<view  style="width: 300rpx;margin-left: 20rpx;">
					<view class="kkk">网络</view><text>中国移动，中国联通，中国电信</text>
				</view>
			</view>
			
			<view style="display: flex;justify-content: space-between;margin: 20rpx 20rpx 0 20rpx;">
				<image class="hljs-comment" src="../../static/imges/details1.png" mode=""></image>
				<view class="function">
					<view>
						<image class="hljs-deletion" src="../../static/imges/details1.png" mode=""></image>
					</view>
					<image class="hljs-deletion" src="../../static/imges/details1.png" mode=""></image>
				</view>
			</view>
			
			<view class="hljs-selector-attr">
				长沙开福万达广场项目位于湖南省长沙市开福区，东邻西长街，西临湘江大道，南岭五一大道，北临潮宗。已超高层的城市综合体建筑群将成为长沙新地标。
			</view>
		</view>
		<view style="width: 100%;height: 20rpx;background-color: #F4F4F4;"></view>
		
		<view class="delBtn">
			<view style="font-weight: 600;margin: 30rpx 0 0 20rpx;">
				看了这个户型的人还看了
			</view>

			<view class="djra">
				<view class="delImg">
					<image class="dib" src="../../static/imges/details1.png" mode=""></image>
					<view style="font-weight: 600;font-size: 33rpx;color: #000000;">62m²·万达广场</view>
					<text style="font-weight: 600;font-size: 33rpx;color: #C42E2D;">￥2.5</text>
					<text>元/m²/天</text>
					<!-- <view>最近30天有7人预约过</view> -->
				</view>
				<view class="delImg">
					<image class="dib" src="../../static/imges/details1.png" mode=""></image>
					<view style="font-weight: 600;font-size: 33rpx;color: #000000;">62m²·万达广场</view>
					<text style="font-weight: 600;font-size: 33rpx;color: #C42E2D;">￥2.5</text>
					<text>元/m²/天</text>
					<!-- <view>最近30天有7人预约过</view> -->
				</view>
			</view>
			<view class="djra">
				<view class="delImg">
					<image class="dib" src="../../static/imges/details1.png" mode=""></image>
					<view style="font-weight: 600;font-size: 33rpx;color: #000000;">62m²·万达广场</view>
					<text style="font-weight: 600;font-size: 33rpx;color: #C42E2D;">￥2.5</text>
					<text>元/m²/天</text>
					<!-- <view>最近30天有7人预约过</view> -->
				</view>
				<view class="delImg">
					<image class="dib" src="../../static/imges/details1.png" mode=""></image>
					<view style="font-weight: 600;font-size: 33rpx;color: #000000;">62m²·万达广场</view>
					<text style="font-weight: 600;font-size: 33rpx;color: #C42E2D;">￥2.5</text>
					<text>元/m²/天</text>
					<!-- <view>最近30天有7人预约过</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import glance from '@/components/jm-glance/jm-glance.vue'
	export default {
		components: {
			glance,
		},
		data() {
			return {
				falg:false,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				offsetWidth:'',
				duration: 500,
				array: [],
				List: [{
						title: '转让',
						id: '1',
					},
					{
						title: '100㎡~200㎡',
						id: '2'
					},
					{
						title: '200㎡~300㎡',
						id: '3'
					},
					{
						title: '300㎡~400㎡',
						id: '4'
					}
				],
				keyList: [{
						title: '出租',
						id: '1'
					},
					{
						title: '100㎡~200㎡',
						id: '2'
					},
					{
						title: '200㎡~300㎡',
						id: '3'
					},
					{
						title: '300㎡~400㎡',
						id: '4'
					}
				]
			}
		},
		methods: {
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			clickKeyword(e) {
				this.array = [];
				var arr = [e.name];
				this.array = arr;
			},
			login(){
				uni.switchTab({
				    url: './Home'
				});
			},
			attre(){
				this.falg = true
				if(this.falg == true){
					uni.showToast({
						title:'收藏成功',
						icon:'success',
						duration: 2000	
					})
				}
			},
			arrt(){
				this.falg = false
				if(this.falg == false){
					uni.showToast({
						title:'已取消收藏',
						icon:'success',
						duration: 2000	
					})
				}
			}
		}
	}
</script>

<style>
	.swiper {
		width: 100%;
		height: 480rpx;
	}

	.botton {
		width: 100%;
	}

	.bold {
		width: 55rpx;
		height: 55rpx;
		position: absolute;
		top: 100rpx;
		right: 110rpx;
	}
	.best{
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		top: 100rpx;
		right: 40rpx;
	}
	.buan {
		width: 100%;
		height: 300rpx;
		border-bottom: 1rpx solid #EAEAEA;
		background-color: #FFFFFF;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
	}

	.lian {
		width: 90%;
		position: relative;
		margin-left: 30rpx;
		top: 25rpx;
		font-weight: 550;
	}

	.booor {
		display: flex;
		margin-left: 30rpx;
		margin-top: 50rpx;
		font-size: 20rpx;
	}

	.bor {
		display: flex;
		margin-left: 30rpx;
		margin-top: 10rpx;
		font-size: 20rpx;
	}

	.bohh {
		color: #007EC5;
		margin-left: 20rpx;
	}

	.bott {
		color: #ccc;
		width: 140rpx;
		height: 40rpx;
		text-align: right;
	}

	.botteer {
		width: 100%;
		height: 130rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
	}

	.aqwer {
		margin-left: 30rpx;
	}

	.attbox {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 30rpx 0 30rpx;
		font-size: 32rpx;
	}

	.appp {
		color: #A73837;
		font-weight: 600;
	}

	.attr-name {
		color: #A1A1A1;
		font-size: 20rpx;
	}

	.banter {
		display: flex;
		font-size: 20rpx;
		color: #A1A1A1;
	}

	.box8 {
		width: 45rpx;
		height: 45rpx;
		margin-top: -6rpx;
	}

	.attr-value {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.boxaff {
		width: 40rpx;
		height: 40rpx;
	}

	.atrule {
		display: flex;
		justify-content: space-between;
		margin: 30rpx 20rpx 0 20rpx;
	}

	.headsearch {
		width: 100%;
		height: 360rpx;
	}

	.ban {
		width: 350rpx;
		height: 200rpx;
		border-radius: 20rpx;
		margin: 20rpx 0 0 20rpx;
	}

	.boxarr,
	.djra {
		display: flex;
	}

	.djra {
		justify-content: space-between;
		margin: 20rpx 20rpx 0 20rpx;
	}

	.builtin {
		font-size: 20rpx;
		margin: 20rpx 0 0 20rpx;
	}

	.oo {
		margin-top: 10rpx;
	}

	.kuan {
		color: #A1A1A1;
	}

	.char {
		width: 100%;
		height: 460rpx;
	}

	.code-name {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border: 1rpx solid #ccc;
		margin-top: 20rpx;
	}

	.contont {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #E7F6FD;
		margin-top: 20rpx;
	}

	.class-name {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 20rpx 0 20rpx;
		font-size: 30rpx;
	}

	.delBtn {
		width: 100%;
		height: 800rpx;
	}

	.dib {
		width: 340rpx;
		height: 220rpx;
		border-radius: 20rpx;
	}

	.delImg {
		font-size: 20rpx;
		color: #A1A1A1;
	}

	.mgt__item {
		display: flex;
		justify-content: space-between;
		margin: 40rpx 20rpx 0 20rpx;
	}

	.demoList {
		height: 550rpx;
	}

	.font-class {
		width: 150rpx;
		height: 100rpx;
		border-radius: 20rpx;
	}

	.box5 {
		width: 95%;
		height: 80rpx;
		border-radius: 10rpx;
		text-align: center;
		margin-left: 2.5%;
		line-height: 80rpx;
		background-color: #E7F6FD;
		color: #007EC5;
		position: relative;
		bottom: -40rpx;
	}
	.kkk{
		color: #A1A1A1;
	}
	.hljs-comment{
		width: 440rpx;
		height: 300rpx;
		border-radius: 20rpx;
	}
	.hljs-deletion{
		width: 250rpx;
		height: 150rpx;
		border-radius: 20rpx;
	}
	.hljs-selector-attr{
		width: 95%;
		height: 200rpx;
		margin-left: 2.5%;
		margin-top: 20rpx;
	}
	.boold {
		width: 55rpx;
		height: 55rpx;
		border-radius: 50%;
		background-color: #A1A1A1;
		opacity: 0.4;
		position: absolute;
		top: 95rpx;
		left: 20rpx;
	}
	.bant{
		width: 40rpx;
		height: 40rpx;
		position: relative;
		top: 8rpx;
		left: 4rpx;
	}
	.comment{
		margin-right: 170rpx;
	}
</style>
